<template>
    <div id="app">
        <vue-roll :images="imgs" @onAdd="onAdd"
                  :item-size="{height:'200px'}"
                  :padding="{padding: '0px'}"
                  :enable-nav="false"
                  @onItemClick="onItemClick"
        >
        </vue-roll>

        <vue-roll :images="imgs" @onAdd="onAdd"
                  :item-size="{height:'200px'}"
                  :padding="{'padding': '80px'}"
                  style="margin-top: 40px"
                  :closable="true"
                  @onRemove="onItemRemove"
        >
        </vue-roll>

        <vue-roll :images="imgs" @onAdd="onAdd"
                  :item-size="{height:'400px'}"
                  style="margin-top: 40px"
        >
            <template v-slot="{props}">
                <div style="height:400px ; width: 120px; display: inline-block;  vertical-align: middle; ">
                    <img :src="props.url" style="height: 380px ; width: 120px; object-fit: cover">
                    <div style="text-align: center">{{props.index}}</div>
                </div>
            </template>
        </vue-roll>
    </div>
</template>

<script>
    import VueRoll from "../src";
    // import VueRoll from '@shenluw/vue-roll'

    const img1 = require('./img1.jpg');
    const img2 = require('./img2.jpg');
    export default {
        name: 'app',
        components: {
            VueRoll,
        },
        data() {
            return {
                imgs: [img1, img2]
            }
        },
        methods: {
            onAdd() {
                if (this.index === undefined) {
                    this.index = 0;
                } else
                    this.index++;
                this.imgs.push(this.imgs[this.index]);
            },
            onItemClick(index) {
                console.log("click item ", index);
            },
            onItemRemove(index, url) {
                console.log("remove item ", index, url);
                this.imgs.splice(index, 1)
            }
        }
    }
</script>

<style lang="less">
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }
</style>
